<template>
    <div>
        <el-form
            ref="dataForm"
            :model="dataForm"
            label-width="8em"
            :rules="dataFormRule"
            class="table-edit-from"
        >
            <div v-show="first">
                <el-form-item
                    label="试卷分类"
                    prop="paperType"
                >
                    <div class="table-query-input">
                        <el-select
                            v-model="dataForm.paperType"
                            placeholder="请选择考试类型"
                        >
                            <el-option
                                label="章节测试"
                                value="chapterText"
                            ></el-option>
                            <el-option
                                label="期末考试"
                                value="finalExam"
                            ></el-option>
                            <el-option
                                label="普通考试"
                                value="normalExam"
                            ></el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item
                    label="试卷名称"
                    prop="name"
                >
                    <el-input v-model="dataForm.name"></el-input>
                </el-form-item>
                <el-form-item
                    label="科目"
                    prop="classificationId"
                >
                    <el-cascader
                        v-model="dataForm.classificationId"
                        v-loading="flag.classfication"
                        :options="classificationInfo"
                        :show-all-levels="false"
                        filterable
                        clearable
                        :props="{
                            value: 'id',
                            label: 'name',
                            emitPath: false,
                            checkStrictly: true
                        }"
                        @change="handleClassficationId"
                    ></el-cascader>
                </el-form-item>
                <!--                期末考试 关联课程-->
                <el-form-item
                    label="课程"
                    prop="courseId"
                >
                    <div class="table-query-input">
                        <el-cascader
                            ref="courseRef"
                            v-model="dataForm.courseId"
                            v-loading="flag.course"
                            :options="courseInfo"
                            placeholder="请选择课程"
                            :show-all-levels="false"
                            clearable
                            filterable
                            :props="{
                                value: 'id',
                                label: 'courseName',
                                emitPath: false,
                                checkStrictly: true
                            }"
                            @change="handleChapterId"
                        >
                        </el-cascader>
                    </div>
                </el-form-item>
                <el-form-item
                    label="章节"
                    prop="chapterId"
                >
                    <div class="table-query-input">
                        <el-cascader
                            ref="chapterRef"
                            v-model="dataForm.chapterId"
                            v-loading="flag.chapter"
                            :options="chapterInfo"
                            placeholder="请选择章节"
                            :show-all-levels="false"
                            clearable
                            filterable
                            :props="{
                                value: 'id',
                                label: 'name',
                                emitPath: false,
                                checkStrictly: true
                            }"
                        >
                        </el-cascader>
                    </div>
                </el-form-item>
                <el-form-item
                    label="试卷描述"
                    prop="remark"
                >
                    <el-input
                        v-model="dataForm.remark"
                        type="textarea"
                        :rows="3"
                    ></el-input>
                </el-form-item>
                <el-button
                    type="primary"
                    :loading="submitFlag"
                    @click="goSecond()"
                >
                    下一步
                </el-button>
            </div>

            <div v-show="second">
                <el-container>
                    <el-aside width="200px">
                        <div class="paperTotal">
                            <div style="margin-top: 20px">
                                总题数: {{ dataForm.totalNum }} 题
                            </div>
                            <div>总分数: {{ dataForm.totalScore }} 分</div>
                        </div>
                        <div
                            v-for="(items, index) in questionDataList"
                            :key="index"
                            class="questionData"
                        >
                            <div>
                                <span>{{ items.desc }}</span>
                                <el-button
                                    type="danger"
                                    style="margin-left: 10px;"
                                    size="mini"
                                    icon="el-icon-delete"
                                    circle
                                    @click="removeQuestionList(index)"
                                ></el-button>
                            </div>
                            <span>共 {{ items.num }} 题 共
                {{ items.score }} 分</span>
                        </div>
                    </el-aside>
                    <el-container>
                        <el-header>
                            <div style="margin-top: 20px">
                                {{ dataForm.name }}
                            </div>
                        </el-header>
                        <el-main>
                            <div
                                v-for="(items, index) in questionDataList"
                                :key="index"
                                class="questionData"
                            >
                                <div style="line-height: 50px;">
                                    <el-input
                                        v-model="items.desc"
                                        placeholder="请输入内容"
                                    ></el-input>
                                    <span style="margin-left: 100px;">
                    {{ status[items.firstType] }}</span>
                                    <el-button
                                        type="primary"
                                        style="margin-left: 100px;"
                                        size="mini"
                                        @click="addItemQuestion(items, index)"
                                    >
                                        添加试题
                                    </el-button>
                                </div>
                                <div class="table-data-box">
                                    <el-table
                                        ref="table"
                                        v-loading="tableLoading"
                                        border
                                        :data="items.questionList"
                                        style="width: 100%;min-height:40em"
                                        row-key="id"
                                    >
                                        <el-table-column
                                            type="selection"
                                            min-width="55"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                            prop="remark"
                                            label="试题内容"
                                        >
                                            <template slot-scope="scope">
                                                <div>
                                                    【题型】{{
                                                        status[
                                                            scope.row.firstType
                                                            ]
                                                    }}
                                                </div>
                                                <div class="questionInfo">
                                                    【题干】
                                                    <p v-html="
                                                            scope.row.stem[0].vl
                                                        "></p>
                                                </div>

                                                <div v-if="
                                                        status[
                                                            scope.row.firstType
                                                        ] === '单选题' ||
                                                            status[
                                                                scope.row
                                                                    .firstType
                                                            ] === '多选题'
                                                    ">
                                                    <div
                                                        v-for="(item,
                                                        index) in scope.row
                                                            .answer"
                                                        :key="index"
                                                        class="questionInfo"
                                                    >
                                                        {{ item.option }}、
                                                        <p v-html="
                                                                item.content[0]
                                                                    .vl
                                                            "></p>
                                                    </div>
                                                </div>

                                                <div
                                                    v-if="
                                                        status[
                                                            scope.row.firstType
                                                        ] === '单选题'
                                                    "
                                                    class="questionInfo"
                                                >
                                                    正确答案：{{
                                                        scope.row.rightAnswer
                                                    }}
                                                </div>

                                                <div
                                                    v-if="
                                                        status[
                                                            scope.row.firstType
                                                        ] === '多选题'
                                                    "
                                                    class="questionInfo"
                                                >
                                                    正确答案：<span
                                                    v-for="(item,
                                                        index) in scope.row
                                                            .rightAnswer"
                                                    :key="index"
                                                >{{ item }}</span>
                                                </div>

                                                <div
                                                    v-if="
                                                        status[
                                                            scope.row.firstType
                                                        ] === '判断题'
                                                    "
                                                    class="questionInfo"
                                                >
                                                    正确答案：<span
                                                    v-for="(item,
                                                        index) in scope.row
                                                            .rightAnswer"
                                                    :key="index"
                                                >
                            <span v-if="item === 1">对</span>
                            <span v-else>错</span>
                          </span>
                                                </div>

                                                <div
                                                    v-if="
                                                        status[
                                                            scope.row.firstType
                                                        ] === '填空题'
                                                    "
                                                    class="questionInfo"
                                                >
                                                    正确答案：
                                                    <p
                                                        v-for="(item,
                                                        index) in scope.row
                                                            .rightAnswer"
                                                        :key="index"
                                                        v-html="item.vl"
                                                    ></p>
                                                </div>

                                                <div
                                                    v-if="
                                                        status[
                                                            scope.row.firstType
                                                        ] === '简答题'
                                                    "
                                                    class="questionInfo"
                                                >
                                                    正确答案：
                                                    <p
                                                        v-for="(item,
                                                        index) in scope.row
                                                            .rightAnswer"
                                                        :key="index"
                                                        v-html="item.vl"
                                                    ></p>
                                                </div>

                                                <div class="questionInfo">
                                                    <span>试题解析：</span>
                                                    <p v-html="
                                                            scope.row
                                                                .answerDesc[0]
                                                                .vl
                                                        "></p>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="操作"
                                            width="200"
                                            align="center"
                                            fixed="right"
                                        >
                                            <template slot-scope="scope">
                                                <el-button
                                                    type="warning"
                                                    icon="el-icon-delete"
                                                    size="mini"
                                                    :loading="
                                                        scope.row.opLoading
                                                    "
                                                    @click="
                                                        removeQuestion(
                                                            index,
                                                            scope.$index
                                                        )
                                                    "
                                                >移除
                                                </el-button>
                                                <div>
                                                    本题
                                                    <el-input-number
                                                        v-model="
                                                            scope.row.score
                                                        "
                                                        style="margin-top: 10px;"
                                                        @change="
                                                            changeNum(items)
                                                        "
                                                    >
                                                    </el-input-number>
                                                    分
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>

                            <div>
                                <el-button
                                    type="primary"
                                    plain
                                    @click="
                                        toQuestionlist('singleChoice', null)
                                    "
                                >单选题
                                </el-button>
                                <el-button
                                    type="primary"
                                    plain
                                    @click="
                                        toQuestionlist('multipleChoice', null)
                                    "
                                >多选题
                                </el-button>
                                <el-button
                                    type="primary"
                                    plain
                                    @click="toQuestionlist('judgment', null)"
                                >判断题
                                </el-button>
                                <el-button
                                    type="primary"
                                    plain
                                    @click="toQuestionlist('fill', null)"
                                >填空题
                                </el-button>
                                <el-button
                                    type="primary"
                                    plain
                                    @click="toQuestionlist('text', null)"
                                >简答题
                                </el-button>
                                <el-button
                                    type="primary"
                                    plain
                                    @click="toQuestionlist('combination', null)"
                                >组合题
                                </el-button>
                            </div>
                        </el-main>
                    </el-container>
                </el-container>
                <el-button
                    type="primary"
                    :loading="submitFlag"
                    @click="goFirst()"
                >
                    上一步
                </el-button>
                <el-button
                    type="primary"
                    :loading="submitFlag"
                    @click="goThird()"
                >
                    下一步
                </el-button>
            </div>
            <div v-show="third">
                <el-form-item
                    label="试卷名称"
                    prop="name"
                >
                    <el-input v-model="dataForm.name"></el-input>
                </el-form-item>
                <!--                期末考试 关联课程-->
                <el-form-item
                    label="关联学科"
                    prop="classificationId"
                >
                    <el-cascader
                        v-model="dataForm.classificationId"
                        v-loading="flag.classfication"
                        :options="classificationInfo"
                        :show-all-levels="false"
                        filterable
                        clearable
                        disabled
                        :props="{
                            value: 'id',
                            label: 'name',
                            emitPath: false,
                            checkStrictly: true
                        }"
                    ></el-cascader>
                </el-form-item>
                <!--                期末考试 关联课程-->
                <el-form-item
                    label="课程"
                    prop="courseId"
                >
                    <div class="table-query-input">
                        <el-cascader
                            ref="courseRef"
                            v-model="dataForm.courseId"
                            v-loading="flag.course"
                            :options="courseInfo"
                            placeholder="请选择课程"
                            :show-all-levels="false"
                            clearable
                            filterable
                            disabled
                            :props="{
                                value: 'id',
                                label: 'courseName',
                                emitPath: false,
                                checkStrictly: true
                            }"
                        >
                        </el-cascader>
                    </div>
                </el-form-item>
                <!--                章节测试 关联章节-->
                <el-form-item
                    label="章节"
                    prop="chapterId"
                >
                    <div class="table-query-input">
                        <el-cascader
                            ref="chapterRef"
                            v-model="dataForm.chapterId"
                            v-loading="flag.chapter"
                            :options="chapterInfo"
                            placeholder="请选择章节"
                            :show-all-levels="false"
                            clearable
                            filterable
                            disabled
                            :props="{
                                value: 'id',
                                label: 'name',
                                emitPath: false,
                                checkStrictly: true
                            }"
                        >
                        </el-cascader>
                    </div>
                </el-form-item>
                <el-form-item
                    label="试卷总分"
                    prop="totalScore"
                >
                    <el-input
                        v-model="dataForm.totalScore"
                        disabled
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="试卷及格分"
                    prop="passScore"
                >
                    <el-input v-model="dataForm.passScore"></el-input>
                </el-form-item>
                <el-form-item
                    label="试卷描述"
                    prop="remark"
                >
                    <el-input
                        v-model="dataForm.remark"
                        type="textarea"
                        :rows="3"
                    ></el-input>
                </el-form-item>

                <el-button
                    type="primary"
                    :loading="submitFlag"
                    @click="goSecond()"
                >
                    上一步
                </el-button>
                <el-button
                    type="primary"
                    :loading="submitFlag"
                    @click="save('/exam/paper/update-paper-content')"
                >
                    保存
                </el-button>
            </div>
        </el-form>
        <el-dialog
            v-if="dialogTableVisible"
            v-loading="questiontableLoading"
            title="选择试题"
            :visible.sync="dialogTableVisible"
            width="80%"
        >
            <questionSelect
                :query-data="selectQuestionparams"
                @questionSelectEvent="getQuestionIds"
            ></questionSelect>
        </el-dialog>
    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {
    fetchQuestionByIds,
    fetchQuestionByPaper,
    fetchPaperId
} from "@/api/exam";
import questionSelect from "@/views/models/exam/component/paperQuestionSelectComponent";
import {post, put} from "@/api/request";
import {beanCopy, treeList2Tree} from "@/utils";
import {
    fetchChapterList,
    fetchClassificationList2,
    fetchCourseList
} from "@/api/course";

export default {
    name: "AddPaper",
    components: {
        questionSelect
    },
    mixins: [TablePage],
    data() {
        return {
            addAction: true,
            itemIndex: null,
            dialogTableVisible: false,
            dialogFormVisible: false,
            questiontableLoading: false,
            selectQuestionparams: {
                firstType: "",
                isHide: false,
                queryType: 1
            },
            secondTypeIdOptions: [],
            secondQueryData: {
                firstType: null
            },
            first: true,
            second: false,
            third: false,
            hasDone: false,
            dataForm: {
                paperType: "",
                content: [],
                totalNum: 0,
                totalScore: 0,
                passScore: 0
            },
            questionDataList: [],
            questionData: {
                firstType: "",
                desc: "",
                questionList: []
            },
            questionIds: [],
            initAddForm: {
                id: null,
                name: null,
                remark: null,
                actionCodes: []
            },
            flag: {
                classfication: false,
                course: false,
                chapter: false
            },
            courseQueryData: {
                size: 1000,
                courseSubjectId: ""
            },
            chapterQueryData: {
                size: 1000,
                baseCourseId: ""
            },
            classficationQueryData: {
                size: 1000
            },
            actions: null,
            actionSearch: null,
            src:
                "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
            step: [true, false, false],
            dataFormRule: {
                name: [
                    {
                        required: true,
                        message: "请输入考试名称",
                        trigger: "blur"
                    }
                ]

                // classificationId: [
                //     { required: true, message: "请选择科目", trigger: "change" }
                // ],
            },
            courseInfo: [],
            chapterInfo: [],
            classificationInfo: [],
            questions: [],
            question: {},
            tempScore: 0
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.questionFirstType
        })
    },
    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        },
        $route: function (to, from) {
            this.initdata();
        }
    },

    mounted() {
        this.initdata();
    },
    methods: {
        search() {
        },
        initdata() {
            if (this.$route.query.paperId) {
                this.addAction = false;
                fetchPaperId({id: this.$route.query.paperId}).then(res => {
                    this.dataForm = res;
                    this.handleClassficationId(this.dataForm.classificationId);
                    this.handleChapterId(this.dataForm.courseId);
                });
            }
            this.getClassfication();
            this.dataForm.paperType = this.$route.query.paperType;
            this.dataForm.classificationId = this.$route.query.classificationId;

        },
        goFirst() {
            // if(this.addAction){
            //     this.questionDataList=[];
            //     this.dataForm.totalNum=0;
            //     this.dataForm.totalScore=0;
            // }
            this.first = true;
            this.second = false;
            this.third = false;
        },
        goSecond() {
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.submitFlag = true;
                    const promise = this.addAction
                        ? post("/exam/paper/update", this.dataForm)
                        : put("/exam/paper/update", this.dataForm);
                    promise
                        .then(res => {
                            this.addAction = false;
                            this.dataForm = res;
                            this.$route.query.paperId = res.id;
                            this.tempScore = this.dataForm.passScore;
                            this.contentToDate();
                            this.first = false;
                            this.second = true;
                            this.third = false;
                        })
                        .finally(() => {
                            this.submitFlag = false;
                        });
                } else {
                    return false;
                }
            });
        },
        goThird() {
            this.first = false;
            this.second = false;
            this.third = true;
        },
        addItemQuestion(item, index) {
            this.toQuestionlist(item.firstType, index);
        },

        toQuestionlist(data, index) {
            this.selectQuestionparams.firstType = data;
            this.itemIndex = index;
            this.selectQuestionparams.classificationId = this.dataForm.classificationId;
            this.secondQueryData.firstType = data;
            this.dialogTableVisible = true;
            //this.selectQuestionType(data)
        },
        changeNum() {
            let totalNum = 0;
            let totalScore = 0;
            this.questionDataList.forEach(item => {
                totalNum += parseInt(item.questionList.length);
                item.num = item.questionList.length;
                let score = 0;
                item.questionList.forEach(it => {
                    totalScore += parseInt(it.score);
                    score += parseInt(it.score);
                });
                item.score = score;
            });
            this.dataForm.totalNum = totalNum;
            this.dataForm.totalScore = totalScore;
            this.dataForm.passScore = parseInt(totalScore * 0.6);
        },
        getQuestionIds(data) {
            this.dialogTableVisible = false;
            this.questionIds = data;
            if (this.questionIds.length < 1) {
                return;
            }
            let index = this.itemIndex;
            if (null === index) {
                //查询试题
                fetchQuestionByIds(
                    {ids: this.questionIds},
                    "试题集合查询异常"
                ).then(res => {
                    res = res.map(da => {
                        return {
                            ...da,
                            score: 5
                        };
                    });
                    let exist = false;
                    this.questionDataList.forEach(item => {
                        if (
                            item.firstType ===
                            this.selectQuestionparams.firstType
                        ) {
                            exist = true;
                            res.forEach(da => {
                                this.questionPushDistinct(
                                    item.questionList,
                                    da
                                );
                            });
                        }
                    });
                    if (!exist) {
                        let newQuestionData = {};
                        newQuestionData.firstType = this.selectQuestionparams.firstType;
                        newQuestionData.desc = this.status[
                            this.selectQuestionparams.firstType
                            ];
                        newQuestionData.questionList = res;
                        this.questionDataList.push(newQuestionData);
                    }

                    this.changeNum();
                });
            } else {
                let questionDataListElement = this.questionDataList[index];
                fetchQuestionByIds(
                    {ids: this.questionIds},
                    "试题集合查询异常"
                ).then(res => {
                    res.map(da => {
                        da.score = 5;
                        this.questionPushDistinct(
                            questionDataListElement.questionList,
                            da
                        );
                    });
                    this.changeNum();
                });
            }
        },
        removeQuestion(index, ind) {
            this.questionDataList[index].questionList.splice(ind, 1);
            this.changeNum(this.questionDataList[index]);
        },

        removeQuestionList(index) {
            this.questionDataList.splice(index, 1);
            this.changeNum();
        },
        contentToDate() {
            //查询试题集合
            // this.questionIds=[];
            // this.dataForm.content.forEach( item =>{
            //     item.questions.forEach( ll =>{
            //         this.questionIds.push(ll.id);
            //     })
            // })
            this.getQuestions();
        },
        getQuestions() {
            // if (this.questionIds.length < 1) {
            //     return;
            // }
            //查询试题
            fetchQuestionByPaper(
                {paperType: this.dataForm.paperType, id: this.dataForm.id},
                "试题集合查询异常"
            ).then(res => {
                res = res.map(da => {
                    return {
                        ...da
                    };
                });
                this.questions = res;
                this.dataForm.content.forEach(item => {
                    let newQuestionData = {};
                    newQuestionData.firstType = item.firstType;
                    newQuestionData.desc = item.desc;
                    newQuestionData.questionList = [];
                    item.questions.forEach(ll => {
                        this.getQuestionByid(ll.id);
                        let Obj = {};
                        beanCopy(this.question, Obj, true);
                        newQuestionData.questionList.push(Obj);
                    });
                    this.questionDataList.push(newQuestionData);
                    this.changeNum(newQuestionData);
                });
                this.dataForm.passScore = this.tempScore;
            });
        },
        getQuestionByid(id) {
            this.question = {};
            let obj = {};
            this.questions.forEach(item => {
                if (id === item.id) {
                    beanCopy(item, obj, true);
                    this.question = obj;
                    return false;
                }
            });
        },
        dataToContent() {
            this.dataForm.content = [];
            this.questionDataList.forEach(item => {
                if (item.questionList.length > 0) {
                    let content = {};
                    content.firstType = item.firstType;
                    content.desc = item.desc;
                    let questions = [];
                    item.questionList.forEach(ll => {
                        let questionObj = {};
                        questionObj.id = ll.id;
                        questionObj.score = ll.score;
                        questions.push(questionObj);
                    });
                    content.questions = questions;
                    this.dataForm.content.push(content);
                }
            });
        },
        save(url) {
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.submitFlag = true;
                    this.dataToContent();
                    const promise = put(url, this.dataForm);

                    return promise
                        .then(res => {
                            this.$store.dispatch(
                                "tagsView/delView",
                                this.$route
                            );
                            this.$router.go(-1);
                            //this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                            //this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
                            // window.history.back();
                            // this.$alert("保存成功", "提示")
                        })
                        .finally(() => {
                            this.submitFlag = false;
                        });
                } else {
                    return false;
                }
            });
        },
        //获取课程所属科目
        getClassfication() {
            this.flag.classfication = true;
            fetchClassificationList2(this.classficationQueryData).then(res => {
                this.classificationInfo = treeList2Tree(res);
                this.flag.classfication = false;
            });
        },
        //获取选中学科 查询课程
        handleClassficationId(value) {
            this.courseInfo = [];
            if(!value){
                return;
            }
            this.flag.course = true;
            this.courseQueryData.courseSubjectId = value;
            fetchCourseList(this.courseQueryData, "查询课程信息异常").then(
                res => {
                    this.courseInfo = treeList2Tree(res);
                    this.flag.course = false;
                }
            );
        },
        //根据课程id查询章节id
        handleChapterId(value) {
            this.chapterInfo = [];
            if(!value){
                return
            }
            this.flag.chapter = true;
            this.chapterQueryData.courseId = value;
            this.chapterQueryData.baseCourseId = value;
            fetchChapterList(this.chapterQueryData, "查询章节信息异常").then(
                res => {
                    this.chapterInfo = treeList2Tree(res);
                    this.flag.chapter = false;
                }
            );
        },

        questionPushDistinct(questionList, da) {
            for (let i = 0; i < questionList.length; i++) {
                if (da.id === questionList[i].id) {
                    return false;
                }
            }
            questionList.push(da);
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    background: #fff;
    border-radius: 0.3em 0.3em 0 0;
    padding-bottom: 1em;
    padding-top: 1em;
    padding-left: 1em;
    margin-top: 16px;

    .container-content {
        padding-top: 12px;

        p {
            color: #909399;
            font-size: 15px;
            padding-top: 12px;
        }
    }

    .container-right {
        margin-left: 12px;
        margin-top: 2em;

        .r-img {
            max-width: 240px;
            max-height: 160px;
        }

        .r-btn {
            margin-top: 22px;
        }
    }
}

.table-search-box {
    padding-left: 17px;
    font-size: 16px;
}

.el-header {
    background-color: #fff;
    color: #333;
    text-align: center;
    height: 60px;
}

.el-aside {
    background-color: #fff;
    color: #333;
    text-align: center;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
}

.questionData {
    background-color: #f5f7fa;
    margin-top: 10px;
}

body > .el-container {
    margin-bottom: 40px;
}

.paperTotal {
    background: aliceblue;
}
</style>
